import style from '../assets/css/OrderDetail.module.css';
import { NavBar,Toast,List} from 'antd-mobile/2x';
import { useHistory, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import $api from '../api';


import dayjs from 'dayjs'

const OrderDetail = () => {

    const history = useHistory();
    const location = useLocation();

    const [orderInfo, setOrderInfo] = useState({}); //订单信息


    let id = new URLSearchParams(location.search).get('id');
    console.log(id);
 

    useEffect(() => {
        getOrderInfo(); //获取订单信息 
    }, []);

     //根据传入的id获取订单信息 
    const getOrderInfo = async () => {
        const res = await $api.post('/order/getOne', { orderId:id });
        const { data, success } = res.data;
        console.log(data);
        if (!success) return Toast.show({ content: '抱歉出错了' });
        setOrderInfo(data);
    };

    // 取消订单
    const handleCancel = async ( ) => {
        let res = await $api.post('/order/changeOrder', { orderId: id, State: 9 });
        const { success, data } = res;
        if (success) Toast.show({ content: '取消成功' });
        getOrderInfo();
    }

    const orderStateTxt = () => {
        if (orderInfo.orderState == 1) return '已下单未支付';
        if (orderInfo.orderState == 2) return '已支付待确认';
        if (orderInfo.orderState == 3) return '已确认待核销';
        if (orderInfo.orderState == 4) return '用户已乘车';
        if (orderInfo.orderState == 5) return '用户未乘车已过期';
        if (orderInfo.orderState == 6) return '用户退票申请中';
        if (orderInfo.orderState == 7) return '用户退票成功';
        if (orderInfo.orderState == 8) return '用户退票失败';
        if (orderInfo.orderState == 9) return '用户取消订单';
    }
  

    return(
          <div className={style.main}>
            <NavBar onBack={() => history.goBack()}>订单详情</NavBar>
            <div className={style.ct}>
                <div className={style.orderInfo}>
                    订单状态：{orderStateTxt()}
                </div>
                <List>
                    <List.Item extra={dayjs(orderInfo.orderDate).format('YYYY-MM-DD HH:mm')}>乘车时间</List.Item>
                </List>

                <div className={style.fbox}>
                    {/* 站点 */}
                    <div className={style.fstation}>
                        <div className={style.fs}>
                            {orderInfo.startCity+' '+orderInfo.startStationId}
                        </div>
                        <div className={style.fe}>
                            {orderInfo.arriveCity+' '+orderInfo.arriveStationId}
                        </div>
                    </div>
                </div>

                 <List>
                    <List.Item extra='157****0000'>客服电话</List.Item>
                    <List.Item extra='180****1111'>现场指导员</List.Item>
                </List>

                <div className={style.mblock}></div>

                <List>
                    <List.Item extra={orderInfo.linkMan && orderInfo.linkMan.length + '人'}>乘车人数</List.Item>
                    {orderInfo.linkMan && orderInfo.linkMan.map((item,index) =>( 
                         <List.Item key={index} extra={item.phone} description={'成人'+item.idNumber}>{item.realName}</List.Item>
                    ))}
                   
                </List>

                <div className={style.mblock}></div>
                
                <List>
                    <List.Item extra={dayjs(orderInfo.createdAt).format('YYYY-MM-DD HH:mm')}>购票时间</List.Item>
                </List>

                 <div className={style.mblock}></div>

                <List>
                    <List.Item extra={'￥'+(orderInfo.amount/100)}>订单总金额</List.Item>
                </List>

                 {/* 温馨提示 */}
                <div className={style.readme}>
                    温馨提示区域
                </div>
            </div>

            
            <div className={style.orderBtn}>
                <div className={style.cancel} onClick={handleCancel}>
                    取消支付
                </div>
                <div className={style.pay}>立即支付</div>
            </div>

        </div>
    )
}
export default OrderDetail